前端轮播图最简单实现（小白也能学会） |
您所在的位置：网站首页 › vue image src写死 › 前端轮播图最简单实现（小白也能学会） |
前端轮播图最简单实现（小白也能学会）
|
轮播图大家肯定都不陌生，因为这是前端最为常见的一个功能，现在随着框架和一些插件的兴起，很少人会去原生的去写轮播图，所以今天带大家写一下原生的轮播图来熟悉一下
最为主要的就是得知道这张图片的宽度，因为每一次移动的距离就是这张图片的宽度，但是宽度我们不能给死，每一张图片的大小是不一样的，所以根据js的clientWidth来获取，这样不管图片是多大都能获得这张图片的大小，第一步的移动距离就完成了，核心部分也就完成了 然后就是选择的定时器，这里一定要用setInterval这个定时器，不能用setTimeout，主要原因就不细说了，大家应该是都很熟悉的。 最后就是轮播到最后一张图片的时候该如何回到第一张图片呢？这里是直接不带动画的跳转到第一张(一会在代码中体现出来) 下面就来看一下代码的实现过程： 首先是html结构文件，这个轮播图结构上不难: Document
接下来就是css的样式，大家根据自己的喜好设置即可: *{ margin: 0; padding: 0; } ul li { list-style: none; } .slideshow{ position: relative; width: 1400px; height: 600px; margin: 0 auto; overflow: hidden; } .slideshow ul{ width: 600%; position: absolute; height: 600px; left: 0; top: 0; /* transition: all 0s; */ } .slideshow ul li{ float: left; width: 1400px; height: 600px; } .slideshow ul li a img{ width: 1400px; height: 600px; }最后就是核心部分的js： window.addEventListener("load", function () { var a = document.querySelector(".slideshow ul"); // a.style.left="-1400px" // console.dir(a.children[0]) console.log(a.children.length); var num = 0; var len = a.children[0].clientWidth; console.log(a.children[0].clientWidth); setInterval(function(){ if(num==a.children.length){ a.style.left="0px"; a.style.transition="left 0s"; num = 1; }else{ a.style.left=-len*num+"px"; a.style.transition="left 1s"; num++; } },1500); })希望大家学到东西 |
【本文地址】
今日新闻 |
推荐新闻 |